<template>
	<div id="page" v-if="pageShow">
		<div style="position: absolute; left: 0; top: 0">
			<el-image
				:src="getFile.getAssetsFile('img', '背景.png')"
				fit="cover"
				style="
					height: 85.5vh;
					width: 100vw;
					z-index: -999999;
					opacity: 0.05;
				"
			></el-image>
		</div>
		<el-container
			id="container"
			style="display: flex; justify-content: center; align-items: center"
		>
			<el-header
				id="header"
				style="
					margin-top: 2vh;
					width: 95vw;
					border-radius: 0.7vw;
					background-color: white;
				"
			>
				<el-row
					style="height: 100%; display: flex; align-items: center"
				>
					<el-col :span="4" :offset="2">
						<div id="site-name" class="magictime vanishIn">
							Amadeus
						</div>
					</el-col>
					<el-col
						:span="5"
						:offset="3"
						id="top-navigate"
						style="display: flex; justify-content: space-between"
					>
						<div style="position: relative">
							<el-link
								style="font-size: 0.9vw"
								:underline="false"
								ref="article"
								id="article"
								@click="toarticle"
								>文章</el-link
							>
							<el-image
								style="
									height: 0.85vw;
									width: 0.85vw;
									position: absolute;
									top: -0.5vh;
									right: -1vw;
								"
								:src="
									getFile.getAssetsFile('img', '上三角.png')
								"
								:fit="'cover'"
							></el-image>
						</div>
						<div style="position: relative">
							<el-link
								style="font-size: 0.9vw"
								:underline="false"
								ref="discover"
								id="discover"
								@click="todiscover"
								>发现</el-link
							>
							<el-image
								style="
									height: 0.85vw;
									width: 0.85vw;
									position: absolute;
									top: -0.5vh;
									right: -1vw;
								"
								:src="
									getFile.getAssetsFile('img', '上三角.png')
								"
								:fit="'cover'"
							></el-image>
						</div>
						<div style="position: relative">
							<el-link
								style="font-size: 0.85vw"
								:underline="false"
								ref="board"
								id="board"
								@click="toboard"
								>留言板</el-link
							>
							<el-image
								style="
									height: 0.85vw;
									width: 0.85vw;
									position: absolute;
									top: -0.5vh;
									right: -1vw;
								"
								:src="
									getFile.getAssetsFile('img', '上三角.png')
								"
								:fit="'cover'"
							></el-image>
						</div>
						<div style="position: relative">
							<el-link
								style="font-size: 0.9vw"
								:underline="false"
								ref="about-me"
								id="about-me"
								@click="toaboutMe"
								>我的</el-link
							>
							<el-image
								style="
									height: 0.85vw;
									width: 0.85vw;
									position: absolute;
									top: -0.5vh;
									right: -1vw;
								"
								:src="
									getFile.getAssetsFile('img', '上三角.png')
								"
								:fit="'cover'"
							></el-image>
						</div>
					</el-col>
					<el-col :span="4" :offset="2" id="search">
						<el-input
							v-model="searchVal"
							placeholder="搜索文章"
							maxlength="20"
							clearable
							size="large"
							style="
								position: relative;
								height: 2vw;
								font-size: 0.9vw;
							"
						>
							<template #append>
								<el-button
									@click="search"
									class="hvr-shrink"
									style="font-size: 0.9vw"
								>
									搜索
								</el-button>
							</template>
						</el-input>
					</el-col>
					<el-col
						:span="2"
						:offset="1"
						style="margin: 3vh 0 3vh 2.5vw !important"
					>
						<div>
							<el-link
								type="danger"
								style="font-weight: bold"
								v-if="manageShow()"
								@click="managerValidateShow()"
							>
								管理员管理
							</el-link>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-main id="main">
				<el-row>
					<el-col :span="19">
						<el-carousel
							trigger="click"
							height="70vh"
							arrow="always"
							:motion-blur="true"
							pause-on-hover
							style="position: relative"
						>
							<el-carousel-item
								v-for="item in imgList"
								:key="item.name"
							>
								<el-image
									style="height: 100%; width: 100%"
									:src="item.cover"
									fit="fill"
									class="hvr-grow"
									@click="pushBlog(item.id, item.uploader)"
								/>
								<div>
									<div
										style="
											position: absolute;
											bottom: 20vh;
											left: 3vw;
										"
									>
										<el-button
											style="
												user-select: none;
												background-color: rgba(
													90,
													90,
													90,
													0.7
												);
												border: whitesmoke 1px solid;
												color: white;
											"
											:icon="Star"
											round
											size="large"
											>{{ item.category }}</el-button
										>
									</div>
									<div
										style="
											position: absolute;
											bottom: 3vh;
											left: 3vw;
											color: white;
										"
									>
										{{ item.title }}
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</el-col>
					<el-col :span="4" :offset="1">
						<el-card
							shadow="hover"
							style="height: 35vh; width: 13vw"
						>
							<el-image
								@click="toaboutMe"
								v-if="!loginState"
								class="avatarImg hvr-grow-shadow"
								:src="
									getFile.getAssetsFile(
										'img',
										'未登录头像.png'
									)
								"
								fit="fill"
								style="
									height: 10vh;
									width: 10vh;
									border-radius: 50%;
									display: block;
									margin-left: auto;
									margin-right: auto;
									border: 5px solid rgba(219, 112, 147, 0.2);
								"
							></el-image>
							<el-image
								@click="toaboutMe"
								v-else
								class="avatarImg hvr-grow-shadow"
								:src="userMsg.avatar"
								fit="fill"
								style="
									height: 10vh;
									width: 10vh;
									border-radius: 50%;
									display: block;
									margin-left: auto;
									margin-right: auto;
									border: 5px solid rgba(219, 112, 147, 0.2);
								"
							></el-image>
							<div
								v-if="loginState"
								style="width: 100%; margin-top: 1vh"
							>
								<div
									style="
										width: 100%;
										text-align: center;
										font-weight: bold;
									"
								>
									{{ userMsg.nickname }}
								</div>
								<div style="margin-top: -1vh">
									<typeWriter
										:msg="userMsg.notes"
									></typeWriter>
								</div>
								<div
									style="
										display: flex;
										flex-direction: column;
										width: 100%;
										margin: 2vh 0;
									"
								>
									<div
										style="
											display: flex;
											justify-content: space-between;
										"
									>
										<!-- Comment, StarFilled -->
										<div
											style="
												display: flex;
												flex-direction: column;
												margin-left: 1vw;
											"
										>
											<el-text>
												<el-icon>
													<Comment />
												</el-icon>
												博客
											</el-text>
											<el-text
												style="
													margin-top: 1vh;
													margin-left: 1vw;
												"
											>
												{{ categoryLabelObj.length }}
											</el-text>
										</div>
										<div
											style="
												display: flex;
												flex-direction: column;
												margin-right: 1vw;
											"
										>
											<el-text>
												<el-icon>
													<StarFilled />
												</el-icon>
												分类
											</el-text>
											<el-text
												style="
													margin-top: 1vh;
													margin-left: 1vw;
												"
											>
												{{ categoryLabelObj.length }}
											</el-text>
										</div>
									</div>
								</div>
								<div
									style="
										width: 100%;
										margin-top: 2.5vh;
										display: flex;
										justify-content: center;
									"
								>
									<el-button
										type="danger"
										plain
										@click="quitUser"
										>退出登录</el-button
									>
								</div>
							</div>
							<div v-else style="width: 100%; margin-top: 1vh">
								<div
									style="
										width: 100%;
										text-align: center;
										font-weight: bold;
									"
								>
									未登录
								</div>
								<div
									style="
										display: flex;
										align-items: center;
										justify-content: center;
										margin: 3vh;
									"
								>
									<el-button
										type="primary"
										plain
										@click="login"
										>登录</el-button
									>
									<el-button
										type="success"
										plain
										@click="register"
										>注册</el-button
									>
								</div>
								<div>
									<typeWriter
										:msg="'世界上没有两片相同的树叶'"
									></typeWriter>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-row
					style="
						display: flex;
						position: relative;
						margin-top: 2vh;
						margin-bottom: 5vh;
					"
				>
					<el-col
						id="bottom-navigate"
						:span="24"
						class="hvr-curl-top-right el-col-2"
						style="height: 50px; display: flex"
					>
						<el-button
							class="hvr-radial-out"
							@click="categoryChange()"
							style="
								margin-left: 1.5vw;
								margin-right: 1.5vw;
								width: 5vw;
								font-weight: bold;
								border: none;
							"
							size="large"
						>
							推送
						</el-button>
						<div v-for="(item, index) in category" :key="index">
							<el-button
								v-if="index <= 5"
								class="hvr-radial-out"
								@click="categoryChange(item.categoryname)"
								style="
									margin-right: 1.5vw;
									width: 6vw;
									font-weight: bold;
									border: none;
								"
								size="large"
							>
								{{ item.categoryname }}
							</el-button>
							<div
								v-else-if="index === 6"
								style="
									margin-left: 1vw;
									width: 6vw;
									font-weight: bold;
									border: none;
								"
								size="large"
							>
								......
							</div>
						</div>
						<div
							style="
								font-weight: bold;
								font-size: 14px;
								margin-left: 4vw;
								display: flex;
								justify-content: end;
								width: 10vw;
							"
						>
							<div>{{ blogData.length }}篇/页</div>
							<el-link
								:underline="false"
								style="
									font-size: 14px;
									font-weight: bold;
									margin-left: 3vw;
								"
								@click="router.push('/article')"
								>更多</el-link
							>
						</div>
					</el-col>
					<el-col
						:span="4"
						:offset="1"
						class="el-col-2"
						style="position: absolute; right: 0; top: -35.5vh"
					>
						<el-card
							shadow="hover"
							style="height: 33.5vh; width: 13vw"
						>
							<el-text style="display: flex; align-items: center">
								<Menu
									style="
										height: 15px;
										width: 15px;
										margin-right: 5px;
									"
								></Menu>
								我的博客标签
							</el-text>
							<div
								v-if="loginState"
								style="
									display: flex;
									flex-direction: column;
									justify-content: center;
								"
							>
								<div
									style="
										display: flex;
										flex-direction: column;
										align-items: center;
										margin-top: 3vh;
									"
									v-if="categoryLabelObj.length === 0"
								>
									<div>
										<el-alert
											title="您还没有发布过博客哦"
											type="warning"
											show-icon
											:closable="false"
											style="height: 150px"
										>
										</el-alert>
									</div>
									<div style="margin-top: 2vh">
										<el-link
											type="warning"
											@click="router.push('/addBlog')"
											>发布您的第一篇博客吧！</el-link
										>
									</div>
								</div>
								<div
									v-else
									v-for="(item, index) in categoryLabelObj"
									:key="index"
								>
									<div
										style="
											display: flex;
											justify-content: space-between;
											align-items: center;
											margin-top: 1vh;
										"
										v-if="index < 7"
									>
										<div>
											<el-text
												:type="typeArr[item.typeColor]"
												size="small"
											>
												{{ item.labelName }}
											</el-text>
										</div>
										<div
											style="
												display: flex;
												justify-content: center;

												align-items: center;
												width: 20px;
												height: 20px;
												border-radius: 50%;
												background-color: rgba(
													180,
													180,
													180,
													0.5
												);
											"
										>
											<el-text type="info" size="small">
												{{ item.count }}
											</el-text>
										</div>
									</div>

									<div
										v-else-if="(index = 7 && index < 8)"
										style="margin-top: 1vh"
									>
										<el-text
											size="small"
											style="
												letter-spacing: 1px;
												color: black;
											"
											>还有更多...</el-text
										>
									</div>
								</div>
							</div>
							<div v-else style="margin-top: 3vh">
								<el-skeleton :rows="3" animated />
							</div>
						</el-card>
					</el-col>
				</el-row>

				<el-row style="margin-top: 3vh">
					<el-col
						:span="24"
						style="display: flex; position: relative"
					>
						<div ref="blogShowTarget">
							<blogShow
								:blogData="blogData"
								:span="6"
								:width="220"
								:marginBottom="5"
								marginLeft="3vw"
								:justifyContent="'flex-start'"
								class="swashIn"
								:display="'center'"
								v-if="blogShowTargetIsVisible"
							></blogShow>
						</div>
					</el-col>
				</el-row>
			</el-main>
			<pageFooter></pageFooter>
		</el-container>
		<div
			v-if="managePageValidateShow"
			style="
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background-color: whitesmoke;
				z-index: 999;
				opacity: 0.9;
				backdrop-filter: blur(50px);
				filter: blur(50px);
				z-index: 999;
			"
		></div>
		<div
			v-if="managePageValidateShow"
			style="
				position: absolute;
				top: 30vh;
				left: 35vw;
				z-index: 9999;
				width: 30vw;
				height: 30vh;
			"
		>
			<el-card
				style="width: 100%; height: 100%; position: relative"
				shadow="hover"
			>
				<div
					style="display: flex; justify-content: center; width: 100%"
				>
					<div>
						<el-text
							type="primary"
							size="large"
							style="font-weight: bold"
							>Validate</el-text
						>
					</div>
				</div>
				<el-row style="margin: 4vh">
					<el-col :span="22" :offset="1">
						<div style="display: flex; align-items: center">
							<el-text
								type="info"
								size="large"
								style="text-wrap: nowrap"
							>
								账户：
							</el-text>
							<el-input
								v-model="validateUsername"
								placeholder="请输入用户名"
								style="font-weight: bold"
							/>
						</div>
					</el-col>
				</el-row>
				<el-row style="margin: 4vh">
					<el-col :span="22" :offset="1">
						<div style="display: flex; align-items: center">
							<el-text
								type="info"
								size="large"
								style="text-wrap: nowrap"
							>
								密码：
							</el-text>
							<el-input
								v-model="validatePassword"
								placeholder="请输入密码"
								type="password"
								style="font-weight: bold"
							/>
						</div>
					</el-col>
				</el-row>
				<div
					style="width: 100%; display: flex; justify-content: center"
				>
					<div>
						<el-button
							type="success"
							size="large"
							@click="managerValidate"
						>
							确定
						</el-button>
					</div>
				</div>
				<div style="position: absolute; right: 1.5vw; top: 2vh">
					<el-icon
						class="hvr-shrink"
						@click="managePageValidateShow = false"
					>
						<CloseBold />
					</el-icon>
				</div>
			</el-card>
		</div>
	</div>
	<div
		v-else
		style="display: flex; justify-content: center; margin-top: 10vh"
	>
		<el-skeleton :rows="30" animated style="height: 120vh; width: 80vw" />
	</div>
</template>

<script setup>
import {
	Aim,
	Menu,
	Star,
	Comment,
	StarFilled,
	CloseBold,
} from '@element-plus/icons-vue';
import { onMounted, reactive } from 'vue';
import getFile from '../utils/getAssetsFile';
import axios from 'axios';
import { user } from '../store/user.js';
import { date } from '../store/date.js';
import { blog } from '../store/blog.js';
import { storeToRefs } from 'pinia';
import pageFooter from '../components/pageFooter.vue';
import getAssetsFile from '../utils/getAssetsFile';

//异步组件引入
import { useIntersectionObserver } from '@vueuse/core';
import { ElNotification } from 'element-plus';
const blogShow = defineAsyncComponent(() =>
	import('../components/blogShow.vue')
);
const blogShowTarget = ref(null); //相当于一个dom元素，给需要隐藏或显示的元素加上个:ref = target 就完事了，但不能给组件，组件外面套一层div，给div的
const blogShowTargetIsVisible = ref(false); //这个是控制异步组件显示与否的，给组件加个v-if来绑定这个
const { stop } = useIntersectionObserver(
	blogShowTarget,
	([{ isIntersecting }]) => {
		if (isIntersecting) {
			blogShowTargetIsVisible.value = isIntersecting;
		}
	}
);
const router = useRouter();

const userStore = user();
const dateStore = date();
const blogStore = blog();

let searchVal = ref('');
let loginState = ref('');
let userMsg = ref('');
let category = ref([]);
const article = ref();
let username = localStorage.getItem('username');
const categoryLabel = ref(null);
const categoryLabelObj = ref([{}]);
const typeArr = ref(['info', 'danger', 'warning', 'success', 'primary']);
const blogData = ref([]);
let imgList = ref([]);
const pageShow = ref(false);
const managePageValidateShow = ref(false);
const validateUsername = ref('');
const validatePassword = ref('');

const toarticle = () => {
	router.push('/article');
};
const todiscover = () => {
	router.push('/discover');
};
const toboard = () => {
	router.push('/board');
};
const toaboutMe = () => {
	router.push('/aboutMe');
};
const login = () => {
	router.push('/login');
};

const register = () => {
	router.push('/register');
};

const quitUser = () => {
	localStorage.clear();
	location.reload();
};

const pushBlog = (blogId, uploader) => {
	router.push({ path: '/blogPage', query: { blogId, uploader } });
};

const managerValidate = async () => {
	if (validateUsername.value && validatePassword.value) {
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/login',
				method: 'post',
				data: {
					username: validateUsername.value,
					password: validatePassword.value,
					state: 'validate',
				},
			});
			if (res.data.state === 'userOk') {
				validateUsername.value = '';
				validatePassword.value = '';
				managePageValidateShow.value = false;
				return ElMessage({
					title: 'Warning',
					message: '抱歉，请回吧，这不是您该来的地方',
					type: 'warning',
				});
			} else if (res.data.state === 'error') {
				validateUsername.value = '';
				validatePassword.value = '';
				managePageValidateShow.value = false;
				return ElMessage({
					title: 'Error',
					message: '服务器错误',
					type: 'error',
				});
			} else if (res.data.state === 'managerOk') {
				ElMessage({
					title: 'Success',
					message: '验证通过',
					type: 'success',
				});
				userStore.$state.manageConfirm = true;
				managePageValidateShow.value = false;
				setTimeout(() => {
					router.push('/manage');
				}, 2000);
				return;
			} else {
				ElMessage({
					title: 'Warning',
					message: '账户或密码输入错误',
					type: 'warning',
				});
				return;
			}
		} catch (error) {
			console.log(error);
			return ElMessage({
				title: 'Error',
				message: '请检查本地网络',
				type: 'error',
			});
		}
	} else {
		return ElMessage({
			title: 'Warning',
			message: '您尚未输入账户与密码',
			type: 'warning',
		});
	}
};

const managerValidateShow = () => {
	managePageValidateShow.value = true;
};

const manageShow = () => {
	let userType = localStorage.getItem('usertype');
	let userName = localStorage.getItem('username');
	if (userType === 'managerOk' && userName) {
		return true;
	} else {
		return false;
	}
};

const search = async () => {
	if (!searchVal.value) {
		return ElMessage({
			message: '您还未输入搜索内容',
			type: 'error',
		});
	} else {
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getPageTotal',
				method: 'post',
				data: {
					searchVal: searchVal.value,
				},
			});
			if (res.data.state === 'error') {
				return ElMessage({
					title: 'Error',
					message: '服务器错误',
					type: 'error',
				});
			} else if (res.data.state === 'none') {
				return ElMessage({
					title: 'Warning',
					message: '没有查询到相关博客记录',
					type: 'warning',
				});
			} else {
				blogStore.$patch((state) => {
					state.total = res.data.pageLength;
				});
			}
		} catch (error) {
			console.log(error);
			return ElMessage({
				message: '请检查本地网络',
				type: 'error',
			});
		}
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/searchBlog',
				method: 'post',
				data: {
					searchVal: searchVal.value,
					limit: 6,
					offset: 0,
				},
			});
			if (res.data.state === 'error') {
				return ElMessage({
					message: '服务器错误',
					type: 'error',
				});
			} else if (res.data.state === 'none') {
				blogStore.$patch((state) => {
					state.searchState = 'none';
					state.searchVal = searchVal.value;
				});
				return router.push('/blogSearchDetail');
			} else {
				blogStore.$patch((state) => {
					state.searchState = 'ok';
					state.searchVal = searchVal.value;
					state.data = res.data.data;
				});
				return router.push('/blogSearchDetail');
			}
		} catch (error) {
			console.log(error);
			return ElMessage({
				message: '请检查本地网络',
				type: 'error',
			});
		}
	}
};

const categoryChange = async (categoryName) => {
	if (!categoryName) {
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserPartBlog',
				method: 'post',
				data: {
					limit: 12,
				},
			});
			if (res.data.state === 'error') {
				return ElMessage({
					message: '服务器错误',
					type: 'error',
				});
			} else {
				blogData.value = res.data.data;
				return ElMessage({
					message: '查询成功',
					type: 'success',
				});
			}
		} catch (error) {
			console.log(error);
			return ElMessage({
				message: '请检查本地网络',
				type: 'error',
			});
		}
	} else {
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getPartCategoryBlog',
				method: 'post',
				data: {
					categoryname: categoryName,
					limit: 12,
				},
			});
			if (res.data.state === 'ok') {
				blogData.value = res.data.data;
				return ElMessage({
					message: '查询成功',
					type: 'success',
				});
			} else {
				return ElMessage({
					message: '服务器错误',
					type: 'error',
				});
			}
		} catch (error) {
			console.log(error);
			return ElMessage({
				message: '请检查本地网络',
				type: 'error',
			});
		}
	}
};

onBeforeMount(async () => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserPartBlog',
			method: 'post',
			data: {
				limit: 4,
			},
		});
		if (res.data.state === 'ok') {
			imgList.value = res.data.data;
		} else {
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		}
		for (let item of imgList.value) {
			if (!item.cover) {
				item.cover = getFile.getAssetsFile('img', '真由理.jpg');
			}
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '服务器错误',
			type: 'error',
		});
	}
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getCategory',
			method: 'get',
		});
		if (res.data.state === 'error') {
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			category.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '服务器错误',
			type: 'error',
		});
	}

	if (username) {
		userMsg.value = await userStore.getSpecifyUserMsg(username);
		if (userMsg.value !== 'error') {
			loginState.value = true;
			if (!userMsg.value.nickname || userMsg.value.nickname === 'null') {
				userMsg.value.nickname = `新用户${userMsg.value.id}号`;
			}
			if (!userMsg.value.avatar || userMsg.value.avatar === 'null') {
				userMsg.value.avatar = getFile.getAssetsFile(
					'img',
					'未登录头像.png'
				);
			}
			if (!userMsg.value.notes || userMsg.value.notes === 'null') {
				userMsg.value.notes = '这个人很懒...';
			}
			if (!userMsg.value.gender || userMsg.value.gender === 'null') {
				userMsg.value.gender = '保密';
			}

			categoryLabel.value = await blogStore.getUserBlog(username);

			let state = false;
			let typeNum = 0;
			for (let i = 0; i < categoryLabel.value.length; i++) {
				for (let j = 0; j < categoryLabelObj.value.length; j++) {
					if (
						categoryLabelObj.value[j].labelName ===
						categoryLabel.value[i].category
					) {
						categoryLabelObj.value[j].count++;
						state = true;
						continue;
					}
					if (j === categoryLabelObj.value.length - 1 && !state) {
						++typeNum;
						if (typeNum > 4) {
							typeNum = 0;
						}
						categoryLabelObj.value.push({
							typeColor: typeNum,
							labelName: categoryLabel.value[i].category,
							count: 1,
						});
						state = false;
						break;
					}
				}
			}
			categoryLabelObj.value.splice(0, 1);
			console.log(categoryLabelObj.value);
		} else {
			loginState.value = false;
		}
	} else {
		loginState.value = false;
	}
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserPartBlog',
			method: 'post',
			data: {
				limit: 12,
			},
		});

		if (res.data.state === 'ok') {
			blogData.value = res.data.data;

			for (let item of blogData.value) {
				if (!item.cover) {
					item.cover = getFile.getAssetsFile(
						'img',
						'博客默认封面.png'
					);
				}
			}
		} else {
			ElNotification({
				title: 'Warning',
				message: '查询博客错误',
				type: 'warning',
			});
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '服务器错误',
			type: 'error',
		});
	}

	pageShow.value = true;
});
</script>

<style scoped>
@keyframes light-arc {
	0% {
		box-shadow: 0 0 3px rgba(238, 135, 135, 0.3);
	}
	10% {
		box-shadow: 0 0 4px rgba(242, 71, 71, 0.5);
	}
	20% {
		box-shadow: 0 0 5px rgba(245, 159, 159, 0.3);
	}
	30% {
		box-shadow: 0 0 4px rgba(194, 75, 75, 0.5);
	}
	40% {
		box-shadow: 0 0 7px rgba(214, 56, 56, 0.5);
	}
	50% {
		box-shadow: 0 0 9px rgba(214, 72, 72, 0.5);
	}
	60% {
		box-shadow: 0 0 10px rgba(245, 103, 103, 0.7);
	}
	70% {
		box-shadow: 0 0 10px rgba(249, 84, 84, 0.5);
	}
	80% {
		box-shadow: 0 0 10px rgba(207, 98, 98, 0.9);
	}
	90% {
		box-shadow: 0 0 10px rgba(180, 75, 75, 0.9);
	}
	100% {
		box-shadow: 0 0 10px rgba(221, 124, 124, 0.9);
	}
}
body {
	z-index: -1;
	font-family: 'AlimamaFangYuanTi';
}
#page {
	overflow-x: hidden;
	position: relative;
}
#container {
	width: 100vw;
}
#header {
	height: 8vh;
	box-shadow: 0px 4px 10px rgb(220, 220, 220);
	margin-bottom: 2vh;
}
#site-name {
	user-select: none;
	font-size: 20px;
	animation-duration: 2s;
	animation-delay: 0;
}

/*
    <div ref="article">文章</div>
	<div ref="discover">发现</div>
	<div ref="board">留言板</div>
	<div ref="about-me">关于我</div>
*/

#main {
	width: 80vw;
	margin: 1vh 10vw;
}
.el-carousel .el-image {
	position: relative;
}
.el-carousel .el-image::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 1)
	); /* 渐变背景色 */
}
#bottom-navigate {
	margin-top: 2vh;
	box-shadow: 0 0 4px #c9c9c9;
	display: flex;
	align-items: center;
	width: 10vw;
}
#bottom-navigate div {
	line-height: 40px;
}
.avatorImg {
	animation: light-arc 5s linear infinite alternate;
}
.swashIn {
	animation-duration: 2s;
}
.el-col-2 {
	align-self: baseline;
}
</style>
